<div xmlns="http://www.w3.org/1999/xhtml"
	 xmlns:h="http://java.sun.com/jsf/html" 
	 xmlns:p="http://primefaces.org/ui"
	 xmlns:f="http://java.sun.com/jsf/core"
	 xmlns:pe="http://primefaces.org/ui/extensions"
	 >
	
 <style type="text/css">
	 .fieldsetGral{
	 	width:600px;
	 }	
	 
	 .ul1{
	 	margin-left:10px;
	 }
	 
	 .texBox1{
	 	width:400px;
	 }
	 
	 .textBox{
	 	width:210px;
	 }
	 .listaBotones{
	 	margin-left:50px;
	 	margin-top:10px;
	 	margin-bottom:10px;
	 }
	 
	 .espacioBoton{
	 	margin-left:10px;
	 }
	 
	 .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	    background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) repeat scroll 0 0 #C4C4C4;
	    border: 1px solid #A8A8A8;
	    color: #4F4F4F;
	    font-size: 12px;
	    font-weight: bold;
	    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
	}
	.ui-dialog .ui-dialog-title {
	    float: left;
	    font-size: 13px;
	    margin: 0.3em 16px 0.1em 0;
	}
	.ui-dialog .ui-dialog-content {
		font-size: 15px;
	}
	.ui-messages-info, .ui-messages-warn, .ui-messages-error, .ui-messages-fatal {
	    border: 1px solid;
	    font-size: 13px;
	    margin: 10px 0;
	    padding: 10px;
	    width: 584px;
	}
	
	.ui-inputfield, .ui-password, .ui-widget, .ui-state-default, .ui-corner-all, .ui-state-error, 
	.ui-state-hover, .ui-state-focus{
	   font-size: 12px;	   
	}
	
	.ui-state-hover, .ui-state-focus, .ui-inputfield .ui-state-focus, .ui-widget-content .ui-inputfield.ui-state-focus,
	.ui-widget-header .ui-inputfield .ui-state-focus{
	   box-shadow: 0;
	}
	
	.ui-inputfield.ui-state-focus, .ui-widget-content .ui-inputfield.ui-state-focus, .ui-widget-header .ui-inputfield.ui-state-focus {
    	box-shadow: 0 important!;
	}
	
	.ui-inputfield{
	   padding: 1px;
	}
</style>
<script type="text/javascript">
   function cambiarTipo(obj){
	   if(obj.getAttribute('type') == 'password')
	   	obj.setAttribute('type', 'text');
	   	else
	   		obj.setAttribute('type', 'password');
   }
   
   function checarCombos(){
	   var obj1 = document.getElementById('catUsuarioSis_form:catUsuariosSis_smcPass1:0');	   
	   var obj2 = document.getElementById('catUsuarioSis_form:catUsuariosSis_smcPass2:0');
	   var pass1 = document.getElementById('catUsuarioSis_form:catUsuarioSis_txtPass');
	   var pass2 = document.getElementById('catUsuarioSis_form:catUsuarioSis_confPass');
	   
	   if(obj1.checked) // mostrar password
			pass1.setAttribute('type', 'text');
	   else
		   pass1.setAttribute('type', 'password'); 
	   
	   if(obj2.checked) // mostrar password
			pass2.setAttribute('type', 'text');
	   else
		   pass2.setAttribute('type', 'password');     
	   
   }
</script>

    <h:form id="catUsuarioSis_form" class="frmGral">
		<p:messages id="catUsSistemaMensajes" showDetail="true"/>
		<h2>
			<h:outputText id="catTxtNombreCatalogo" value="Catalogo Usuario Sistema"></h:outputText>
		</h2>
		<br/>
		<fieldset id="catUsuarioSis_field" class="fieldGral fieldsetGral">
			<legend class="lblGral">Captura / edicion de datos</legend>
			
			<table>
			    <tr>
			       <td> <h:outputLabel value="Nombre Usuario:" id="catUsuarioSis_lblNombre2" class="lblGral"/> </td>
			       <td> <p:inputText styleClass="txtGral textBox" id="catUsuarioSis_txtNombre" value="#{catalogoUsuarioSistemaBean.usuarioSistema.nombre}" 
			       			maxlength="80" >
			       			
			            </p:inputText>
			            <pe:keyFilter for="catUsuarioSis_txtNombre" regEx="/[a-zA-Z&#225;&#233;&#237;&#243;&#250;&#241;&#193;&#201;&#205;&#211;&#218;&#209;&#220; ]/" />
			        </td>
			    </tr>
			    <tr>
			       <td> <h:outputLabel value="Login:" id="catUsuarioSis_lblLogin" class="lblGral"/> </td>
			       <td> <p:inputText styleClass="txtGral textBox" id="catUsuarioSis_txtLogim" value="#{catalogoUsuarioSistemaBean.usuarioSistema.login}"
			       			maxlength="20" 
			       		/>
			       		<pe:keyFilter for="catUsuarioSis_txtLogim" regEx="/[a-zA-Z0-9]/" /> 
			       		</td> 
			    </tr>
			   <tr>
			       <td> <h:outputLabel value="Password:" id="catUsuarioSis_lblPassword" class="lblGral"/> </td>
			       <td> <p:password id="catUsuarioSis_txtPass" styleClass="txtGral textBox" autocomplete="off"
			       			 label="Password" maxlength="20" value="#{catalogoUsuarioSistemaBean.password1}" redisplay="true"
			       			 feedback="true" 
                        promptLabel="Inserte una contrasena" weakLabel="Debil"  
                        goodLabel="Buena" strongLabel="Fuerte">
                        <p:ajax process="@this" />
                        </p:password>
                        <pe:keyFilter for="catUsuarioSis_txtPass" regEx="/[a-zA-Z0-9\.\-\_]/" />
			       		 </td>
			       	<td> </td>
			   </tr>
			   <tr>
			      <td> </td>
			      <td>
			      	<h:selectManyCheckbox id="catUsuariosSis_smcPass1"  
			      		value="#{catalogoUsuarioSistemaBean.mostrarPassword1}"
			      		onchange="cambiarTipo(document.getElementById('catUsuarioSis_form:catUsuarioSis_txtPass'))">
			       		<f:selectItem itemValue="1" itemLabel="Mostrar Password" />
			       	</h:selectManyCheckbox>
			      </td>
			   </tr>
			   <tr>
			       <td> <h:outputLabel value="Confirmar PW:" id="catUsuarioSis_lblConfPass" class="lblGral"/> </td>
			       <td> <p:password id="catUsuarioSis_confPass" styleClass="txtGral textBox" autocomplete="off"
			       			label="Confirmar PW" value="#{catalogoUsuarioSistemaBean.password2}" redisplay="true"
			       			feedback="true" maxlength="20" 
                        promptLabel="Inserte una contrasena" weakLabel="Debil"  
                        goodLabel="Buena" strongLabel="Fuerte">
                        <p:ajax process="@this"> </p:ajax>
                        </p:password> 
                        <pe:keyFilter for="catUsuarioSis_confPass" regEx="/[a-zA-Z0-9\.\-\_]/" />
			       		 </td>			      
			    </tr>
			    <tr>
			    <td> </td>
			    <td>
			    	<h:selectManyCheckbox id="catUsuariosSis_smcPass2"
			    	    value="#{catalogoUsuarioSistemaBean.mostrarPassword2}" 
			    		onchange="cambiarTipo(document.getElementById('catUsuarioSis_form:catUsuarioSis_confPass'))">
			       		<f:selectItem itemValue="1" itemLabel="Mostrar Password" />
			       </h:selectManyCheckbox>
			    </td>
			    </tr>
			 	 <tr>
			       <td> <h:outputLabel value="Status:" id="catUsuarioSis_lblStatus" class="lblGral"/> </td>
			       <td> <h:selectOneMenu id="catUsuarioSis_cmbStatus" value="#{catalogoUsuarioSistemaBean.usuarioSistema.status}" >
			       			<f:selectItem itemLabel="Seleccione una opcion" noSelectionOption="true"></f:selectItem>
			       		    <f:selectItems value="#{catalogoUsuarioSistemaBean.listaStatus}" var="status"
	 	       	  			 itemValue="#{status.clave}" itemLabel="#{status.descripcion}" />   
			       		</h:selectOneMenu> </td>
			    </tr>
				 <tr>
			       <td> <h:outputLabel value="Rol:" id="catUsuarioSis_lblRol" class="lblGral"/> </td>
			       <td> <h:selectOneMenu id="catUsuarioSis_cmbRol" value="#{catalogoUsuarioSistemaBean.usuarioSistema.rol.idRol}" >
			       			<f:selectItem itemLabel="Seleccione una opcion" noSelectionOption="true"></f:selectItem>
			       		    <f:selectItems value="#{catalogoUsuarioSistemaBean.listaRoles}" var="rol"
	 	       	  			 itemValue="#{rol.id}" itemLabel="#{rol.descripcion}" />   
			       		</h:selectOneMenu> </td>
			    </tr>			
			</table>
			
			<ul  class="listaBotones" id="catUsuarioSis_ul4">
				<li>
					<p:commandButton id="cat1p1_btnBuscar" value="BUSCAR"	actionListener="#{catalogoUsuarioSistemaBean.buscarCatalogo}" 
						oncomplete="checarCombos()"
						update="@form" styleClass="espacioBoton butGral" disabled="#{catalogoUsuarioSistemaBean.accionBuscar}" />
					
					<p:commandButton id="cat1p1_btnLimpiar" value="LIMPIAR"  actionListener="#{catalogoUsuarioSistemaBean.limpiarCatalogo}"						
						update="@form"	styleClass="espacioBoton butGral" disabled="#{catalogoUsuarioSistemaBean.accionLimpiar}" />
					
					<p:commandButton id="cat1p1_btnRegistrar" value="REGISTRAR"	actionListener="#{catalogoUsuarioSistemaBean.registrarCatalogo}" 
						oncomplete="checarCombos()"
						update="@form"	styleClass="espacioBoton butGral"	disabled="#{catalogoUsuarioSistemaBean.accionRegistrar}"/>
										
					<p:commandButton id="cat1p1_btnActualizar" value="GUARDAR CAMBIOS" onclick="dlgGuardar.show();" 
						update="@form"	styleClass="espacioBoton butGral"	disabled="#{catalogoUsuarioSistemaBean.accionActualizar}"/>
					
				</li>
			</ul>
	       	
	       	<p:dataTable var="usuarioSistema" value="#{catalogoUsuarioSistemaBean.modelo}" rowKey="#{usuarioSistema.id}"
			 			style="height: 190px; overflow:scroll;" id="dataTable1" 
	       		
	       		paginator="true" rows="10"  
                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                 rowsPerPageTemplate="5,10">  
        
        		
	       		 
	  
	        	<p:column headerText="NOMBRE" sortBy="#{usuarioSistema.nombre}" styleClass="pf-table-columna">  
	            	<h:outputText value="#{usuarioSistema.nombre}" />	            	
	        	</p:column>
	        	
	        	<p:column headerText="LOGIN" sortBy="#{usuarioSistema.login}" styleClass="pf-table-columna">  
	            	<h:outputText value="#{usuarioSistema.login}" />	            	
	        	</p:column> 
	        	
	        	<p:column headerText="STATUS" sortBy="#{usuarioSistema.status}" styleClass="pf-table-columna">  
	            	<h:outputText value="#{usuarioSistema.status}" />	            	
	        	</p:column>    
	        	
	        	<p:column headerText="ROL" sortBy="#{usuarioSistema.rol.descripcion}" styleClass="pf-table-columna">  
	            	<h:outputText value="#{usuarioSistema.rol.descripcion}" />	            	
	        	</p:column>	 			
	 		
	 			<p:column  styleClass="pf-table-columna">  
	            	<p:commandLink value="Eliminar" onclick="dlgEliminar.show()" update="@form"> 
	            			<f:setPropertyActionListener target="#{catalogoUsuarioSistemaBean.idCatalogo}" value="#{usuarioSistema.id}"/>
	            		</p:commandLink> 	            		
	            </p:column>
	        	
	        	<p:column  styleClass="pf-table-columna">  
	            	<p:commandLink value="Actualizar" actionListener="#{catalogoUsuarioSistemaBean.seleccionarCatalogo}"
	            		update="@form">	            		
	            		 <f:param name="idCatalogo" value="#{usuarioSistema.id}"/>	            		 	            	
	            	</p:commandLink>	        	
	        	</p:column>
	 		
	 		
	 		</p:dataTable>
 			 	
		</fieldset>					
	</h:form>
	<!-- Dialogo para confirmar guardado de informacion -->
	<p:confirmDialog id="catalogo_dlgGuardar" severity="alert" widgetVar="dlgGuardar" header="Confirmacion" visible="false"
		message="&#191;Esta seguro que desea guardar los cambios&#63;">
		<h:form id="formDialogoGuardar">
			<p:commandButton id="butSiGuardar" styleClass="butGral boton" value="Si" oncomplete="dlgGuardar.hide();" actionListener="#{catalogoUsuarioSistemaBean.actualizarCatalogo}" update=":catUsuarioSis_form" />
			<p:commandButton id="butNoGuardar" styleClass="butGral boton" value="No" onclick="dlgGuardar.hide()" type="button"/>
		</h:form>
	</p:confirmDialog>
	
	<!-- Dialogo para confirmar borrado de informacion -->
	<p:confirmDialog id="catalogo_dlgEliminar" severity="alert" widgetVar="dlgEliminar" header="Confirmacion" visible="false"
		message="&#191;Esta seguro que desea eliminar el registro&#63;">
		<h:form id="formDialogoEliminar">
			<p:commandButton id="butSiEliminar" styleClass="butGral boton" value="Si" oncomplete="dlgEliminar.hide();" actionListener="#{catalogoUsuarioSistemaBean.eliminarCatalogo}" update=":catUsuarioSis_form" />
			<p:commandButton id="butNoEliminar" styleClass="butGral boton" value="No" onclick="dlgEliminar.hide()" type="button"/>
		</h:form>
	</p:confirmDialog>
</div>